<!-- Site Setting Panel -->
<section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<div class="pageheader">
  <h2><i class="fa fa-css3"></i> CSS3 Animation</h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> CSS3 Animation </li>
    </ol>
  </div>
</div>
<div class="page">
  <section class="animated fadeInRight">
    <div class="row">
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounce</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounce">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">flash</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="flash">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">pulse</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="pulse">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rubberBand</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rubberBand">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">shake</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="shake">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">swing</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="swing">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">tada</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="tada">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">wobble</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="wobble">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceIn</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceIn">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceInDown</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceInDown">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceInLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceInLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceInRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceInRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceInUp</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceInUp">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceOut</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceOut">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceOutDown</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceOutDown">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceOutLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceOutLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceOutRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceOutRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">bounceOutUp</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="bounceOutUp">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeIn</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeIn">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInDown</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInDown">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInDownBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInDownBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInLeftBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInLeftBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInRightBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInRightBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInUp</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInUp">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeInUpBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeInUpBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOut</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOut">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutDown</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutDown">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutDownBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutDownBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutLeftBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutLeftBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutRightBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutRightBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutUp</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutUp">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">fadeOutUpBig</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="fadeOutUpBig">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">flip</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="flip">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">flipInX</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="flipInX">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">flipInY</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="flipInY">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">flipOutX</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="flipOutX">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">flipOutY</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="flipOutY">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">lightSpeedIn</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="lightSpeedIn">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">lightSpeedOut</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="lightSpeedOut">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateIn</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateIn">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateInDownLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateInDownLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateInDownRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateInDownRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateInUpLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateInUpLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateInUpRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateInUpRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateOut</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateOut">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateOutDownLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateOutDownLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateOutDownRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateOutDownRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateOutUpLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateOutUpLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rotateOutUpRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rotateOutUpRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">hinge</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="hinge">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rollIn</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rollIn">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">rollOut</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="rollOut">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomIn</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomIn">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomInDown</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomInDown">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomInLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomInLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomInRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomInRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomInUp</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomInUp">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomOut</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomOut">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomOutDown</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomOutDown">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomOutLeft</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomOutLeft">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomOutRight</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomOutRight">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
      <div class="col-md-2"> 
        <!-- START panel-->
        <div class="panel panel-default animated">
          <div class="panel-heading">zoomOutUp</div>
          <div class="panel-body">
            <button type="button" animatectrl class="btn btn-default btn-block btn-3d" data-animated="zoomOutUp">Animate </button>
          </div>
        </div>
        <!-- END panel--> 
      </div>
    </div>
  </section>
</div>
